import React from "react";
import {DatePicker, List, TextareaItem, Modal} from 'antd-mobile';
import styles from "./Info.css"
import {newMail} from "../../api"

export default class Info extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            method: '',
            date: new Date(2021, 2, 10)
        }
    }

    render() {
        const style = {
            width: '80%',
            marginTop: '8%'
        }

        Date.prototype.format = function(fmt) {
            var o = {
                "M+" : this.getMonth()+1,                 //月份
                "d+" : this.getDate(),                    //日
                "h+" : this.getHours(),                   //小时
                "m+" : this.getMinutes(),                 //分
                "s+" : this.getSeconds(),                 //秒
                "q+" : Math.floor((this.getMonth()+3)/3), //季度
                "S"  : this.getMilliseconds()             //毫秒
            };
            if(/(y+)/.test(fmt)) {
                fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
            }
            for(var k in o) {
                if(new RegExp("("+ k +")").test(fmt)){
                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
                }
            }
            return fmt;
        }

        return (
            <div style={{textAlign: "center"}}>
                {this.state.method === ''
                    ? <div>
                        <h3>您希望我们以何种方式/何时寄回给您</h3>
                        <img onTouchEnd={this.touchEnd.bind(this, "/img/tj/资源 29@2x.png")}
                             onTouchStart={this.touchStart.bind(this, "/img/tj/资源 30@2x.png")}
                             onClick={() => this.putMethod('1')}
                             style={style}
                             src="/img/tj/资源 29@2x.png" alt=""/>
                        <img onTouchEnd={this.touchEnd.bind(this, "/img/tj/资源 31@2x.png")}
                             onTouchStart={this.touchStart.bind(this, "/img/tj/资源 32@2x.png")}
                             onClick={() => this.putMethod('2')}
                             style={style}
                             src="/img/tj/资源 31@2x.png" alt=""/>
                        <img onTouchEnd={this.touchEnd.bind(this, "/img/tj/资源 33@2x.png")}
                             onTouchStart={this.touchStart.bind(this, "/img/tj/资源 34@2x.png")}
                             onClick={() => this.putMethod('3')}
                             style={style}
                             src="/img/tj/资源 33@2x.png" alt=""/>
                    </div>
                    :
                    <div>
                        <div className={styles.form}>
                            <List>
                                {this.state.method === "1" && <TextareaItem
                                    ref="qqInput"
                                    title="QQ"
                                    placeholder=""
                                    data-seed="logId"
                                    // ref={el => this.autoFocusInst = el}
                                    autoHeight
                                />}

                                {this.state.method === "2" && <TextareaItem
                                    ref="emailInput"
                                    title="邮箱"
                                    placeholder=""
                                    data-seed="logId"
                                    // ref={el => this.autoFocusInst = el}
                                    autoHeight
                                />}

                                {this.state.method === "3" &&
                                <div>
                                    <TextareaItem
                                        ref="nameRef"
                                        title="收件人"
                                        placeholder=""
                                        data-seed="logId"
                                        autoHeight
                                    />
                                    <TextareaItem
                                        ref="phoneRef"
                                        title="联系方式"
                                        placeholder=""
                                        data-seed="logId"
                                        // ref={el => this.autoFocusInst = el}
                                        autoHeight
                                    />
                                    <TextareaItem
                                        ref="addressRef"
                                        title="收信地址"
                                        placeholder=""
                                        data-seed="logId"
                                        // ref={el => this.autoFocusInst = el}
                                        autoHeight
                                    />
                                </div>}
                                <DatePicker
                                    ref="dateRef"
                                    mode="date"
                                    title="选择日期"
                                    extra="Optional"
                                    minDate={new Date(2021, 2, 10)}
                                    maxDate={new Date(2021, 3, 10, 23, 59, 59)}
                                    value={this.state.date}
                                    onChange={date => this.setState({date})}
                                >
                                    <List.Item arrow="horizontal">收信日期</List.Item>
                                </DatePicker>
                            </List>
                        </div>
                        <img onClick={this.postMail} className={styles.button} src="/img/tj/资源 68@2x.png" alt=""/>
                    </div>
                }
            </div>
        )
    }

    postMail = async () => {
        console.log(localStorage)
        if(!localStorage.text){
            alert("邮件数据异常")
            return
        }
        else {
            try {
                const req = {
                    sendtime:new Date(this.refs.dateRef.props.value).format("yyyy-MM-dd"),
                    method: this.state.method,
                    content:localStorage.text,
                }
                console.log(req)
                const address = {}
                if(req.method === "1") address.QQ = this.refs.qqInput.state.value
                else if(req.method === "2") address.email = this.refs.emailInput.state.value
                else if(req.method === "3") {
                    console.log(this.refs.addressRef)
                    address.name = this.refs.nameRef.state.value
                    address.phone = this.refs.phoneRef.state.value
                    address.address = this.refs.addressRef.state.value
                }
                req.address = address
                console.log(req)
                const res = await newMail(req)

                this.props.history.push('/mymail?sendtime='+res.data.sendtime)
            }
            catch (err) {
                alert("保存失败,请检查是否已存在信件或信息错误")
                console.log(err)
            }
        }
    }

    putMethod = (value) => {
        this.setState({
            method: value
        })
    }
    touchStart = (src, e) => {
        e.target.src = src
    }
    touchEnd = (src, e) => {
        e.target.src = src
    }
}